import React, {FC, useContext} from 'react';
import "./JournalDefaultLayout.less";
import JournalNewsList from "@/pages/JournalPage/JournalDetail/commons/JournalNewsList";
import HotArticles from "@/pages/HomePage/HotArticles";
import {JournalDetailContext} from "@/pages/JournalPage/JournalDetail/commons/JournalDetailContext";

interface JournalDefaultLayoutProps {
  children?: React.ReactNode;
  includeNews?: boolean;
  includeHotArticles?: boolean;
}

const JournalDefaultLayout: FC<JournalDefaultLayoutProps> = (props) => {
  const {includeNews = true, includeHotArticles = true} = props;
  const {journalId} = useContext(JournalDetailContext)
  return (
    <div className={"journal-default-layout-container"}>
      <div className={"journal-default-layout-left"}>
        {props.children}
      </div>
      {
        (includeNews || includeHotArticles) && (
          <div className={"journal-default-layout-right"}>
            {
              includeNews && (
                <JournalNewsList/>
              )
            }
            {
              includeHotArticles && (
                <HotArticles journalId={journalId}/>
              )
            }
          </div>
        )
      }
    </div>
  );
};

export default JournalDefaultLayout;
